<template>
	<div class="wrap">
		<Gheader :showheader="data"></Gheader>
			<scroll  class="wrapper"> 
				<div class="inwrap">
					<ul>
						<li><span>账户管理</span><span>></span></li>
						<li><span>修改登录密码</span><span>></span></li>
						<li><span>清除缓存</span><span>></span></li>
						<li><span>阿拉灯用户协议</span><span>></span></li>
						<li><span>个人委托协议</span><span>></span></li>
						<li><span>检查更新</span><span>></span></li>
						<li @click="removebtn()"><span >退出账户</span><span>></span></li>
					</ul>
					
					
				</div>
			</scroll>
			<div class="mask"></div>
			<div class="exit">
						<p>是否退出?</p>
						<span @click="removecookie()">确定</span><span @click="cancel()">取消</span>
			</div>
		</div>
</template>

<script>
import Gheader from "../person-center/Gheader"
import Scroll from "../../../../base/Scroll"
export default{
		name:"Shezhi",
		data(){
			return{
				data:{
					word:"设置",
					left:[true,false,false],
					right:[false,false,false,false,false,false],
					leftword:"",
					rightword1:"",
					rightword2:""
				},
			}
		},
		components:{
			Gheader,
			Scroll
		},
		methods:{
			removebtn:function  () {//点击退出
				$(".mask,.exit").css("display","block");
			},
			removecookie:function  () {//点击确定
					this.cookie.deleteCookie("useraccount");
					this.cookie.deleteCookie("userpassword");
					this.$store.commit('removepersonInfor');//调用vuex里的事件
					$(".mask,.exit").css("display","none");
					this.$router.push({path:"/PersonalCenter/0"})
			},
			cancel:function  () {//点击取消
				$(".mask,.exit").css("display","none");
			}
		}
	}
</script>

<style scoped>
	.wrap{
		width: 100%;
		height: 100vh;
		background: #F2F2F2;
	}
	.wrapper{
		height: 90vh;
		overflow: hidden;
	}
	.inwrap{
		height: 90.2vh;
	}
	.inwrap ul{
		background: white;
		margin-top: 2vh;
	}
	.inwrap ul>li{
		width: 94.4%;
		padding: 0 2.8%;
		height: 6.757vh;
		border-bottom: 1px solid #CCCCCC;
		line-height:6.757vh ;
		font-size: 1.3rem;
	}
	.inwrap ul>li span:nth-child(1){
		float: left;
	}
	.inwrap ul>li span:nth-child(2){
		float:right;
	}
	.mask{
		display: none;
		width: 100%;
		height: 100vh;
		background: black;
		opacity: 0.5;
		position: fixed;
		top: 0;
		z-index: 11;
	}
	.exit{
		display: none;
		width: 94.4%;
		margin: 0 2.8%;
		height: 30vh;
		position: fixed;
		top: 50vh;
		background: white;
		border-radius: 4px;
		z-index: 12;
		text-align: center;
		font-size: 1.3rem;
	}
	.exit p{
		height: 70%;
		line-height:21vh;
		border-bottom: 1px solid #CCCCCC;
	}
	.exit span{
		line-height:8.5vh ;
	}
	.exit span:nth-child(1){
		display: inline-block;
		float: left;
		width:50%;
		
	}
	.exit span:nth-child(2){
		display: inline-block;
		width: 49%;
		float: right;
		border-left:1px solid #CCCCCC;
	}
	
</style>